:root {
  /* calculates perceived lightness using the sRGB Luma method */
  --theme-t: 0.55;
  --theme-t-r: 0.2721;
  --theme-t-g: 0.7152;
  --theme-t-b: 0.1255;
}

:root {
  --theme-accent: var(--theme-accent-rgb-r), var(--theme-accent-rgb-g), var(--theme-accent-rgb-b);
  --theme-accent-text: 0, 0%, calc(((((var(--theme-accent-rgb-r) * var(--theme-t-r)) + (var(--theme-accent-rgb-g) * var(--theme-t-g)) + (var(--theme-accent-rgb-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
}

:root {
  --theme-font-display-name: "Fjalla One", sans-serif;
  --theme-font-display-weight: 400;
  --theme-font-display-style: "normal";
  --theme-font-ui-name: "Open Sans", sans-serif;
  --theme-font-ui-weight: 400;
  --theme-font-ui-style: "normal";
}

:root {
  --theme-background-accent: var(--theme-accent);
}

:root {
  --theme-background-theme: var(--theme-primary-010);
}

:root {
  --theme-background-gradient-start: var(--theme-background-gradient-start-rgb-r), var(--theme-background-gradient-start-rgb-g), var(--theme-background-gradient-start-rgb-b);
  --theme-background-gradient-end: var(--theme-background-gradient-end-rgb-r), var(--theme-background-gradient-end-rgb-g), var(--theme-background-gradient-end-rgb-b);
}

:root {
  --theme-background-color: var(--theme-background-color-rgb-r), var(--theme-background-color-rgb-g), var(--theme-background-color-rgb-b);
  --theme-background-color-text: 0, 0%, calc(((((var(--theme-background-color-rgb-r) * var(--theme-t-r)) + (var(--theme-background-color-rgb-g) * var(--theme-t-g)) + (var(--theme-background-color-rgb-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
}

.is-theme-style-light {
  --theme-primary-010: var(--theme-primary-14);
  --theme-primary-020: var(--theme-primary-13);
  --theme-primary-030: var(--theme-primary-12);
  --theme-primary-040: var(--theme-primary-11);
  --theme-primary-050: var(--theme-primary-10);
  --theme-primary-060: var(--theme-primary-9);
  --theme-primary-070: var(--theme-primary-8);
  --theme-primary-080: var(--theme-primary-7);
  --theme-primary-090: var(--theme-primary-6);
  --theme-primary-100: var(--theme-primary-5);
  --theme-primary-110: var(--theme-primary-4);
  --theme-primary-120: var(--theme-primary-3);
  --theme-primary-130: var(--theme-primary-2);
  --theme-primary-140: var(--theme-primary-1);
}

.is-theme-style-dark {
  --theme-primary-010: var(--theme-primary-1);
  --theme-primary-020: var(--theme-primary-2);
  --theme-primary-030: var(--theme-primary-3);
  --theme-primary-040: var(--theme-primary-4);
  --theme-primary-050: var(--theme-primary-5);
  --theme-primary-060: var(--theme-primary-6);
  --theme-primary-070: var(--theme-primary-7);
  --theme-primary-080: var(--theme-primary-8);
  --theme-primary-090: var(--theme-primary-9);
  --theme-primary-100: var(--theme-primary-10);
  --theme-primary-110: var(--theme-primary-11);
  --theme-primary-120: var(--theme-primary-12);
  --theme-primary-130: var(--theme-primary-13);
  --theme-primary-140: var(--theme-primary-14);
}

.is-theme-style-light {
  --theme-primary-text-010: 0, 0%, calc(((((var(--theme-primary-14-r) * var(--theme-t-r)) + (var(--theme-primary-14-g) * var(--theme-t-g)) + (var(--theme-primary-14-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
  --theme-primary-text-020: 0, 0%, calc(((((var(--theme-primary-13-r) * var(--theme-t-r)) + (var(--theme-primary-13-g) * var(--theme-t-g)) + (var(--theme-primary-13-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
  --theme-primary-text-030: 0, 0%, calc(((((var(--theme-primary-12-r) * var(--theme-t-r)) + (var(--theme-primary-12-g) * var(--theme-t-g)) + (var(--theme-primary-12-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
  --theme-primary-text-040: 0, 0%, calc(((((var(--theme-primary-11-r) * var(--theme-t-r)) + (var(--theme-primary-11-g) * var(--theme-t-g)) + (var(--theme-primary-11-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
  --theme-primary-text-050: 0, 0%, calc(((((var(--theme-primary-10-r) * var(--theme-t-r)) + (var(--theme-primary-10-g) * var(--theme-t-g)) + (var(--theme-primary-10-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
  --theme-primary-text-060: 0, 0%, calc(((((var(--theme-primary-9-r) * var(--theme-t-r)) + (var(--theme-primary-9-g) * var(--theme-t-g)) + (var(--theme-primary-9-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
  --theme-primary-text-070: 0, 0%, calc(((((var(--theme-primary-8-r) * var(--theme-t-r)) + (var(--theme-primary-8-g) * var(--theme-t-g)) + (var(--theme-primary-8-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
  --theme-primary-text-080: 0, 0%, calc(((((var(--theme-primary-7-r) * var(--theme-t-r)) + (var(--theme-primary-7-g) * var(--theme-t-g)) + (var(--theme-primary-7-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
  --theme-primary-text-090: 0, 0%, calc(((((var(--theme-primary-6-r) * var(--theme-t-r)) + (var(--theme-primary-6-g) * var(--theme-t-g)) + (var(--theme-primary-6-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
  --theme-primary-text-100: 0, 0%, calc(((((var(--theme-primary-5-r) * var(--theme-t-r)) + (var(--theme-primary-5-g) * var(--theme-t-g)) + (var(--theme-primary-5-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
  --theme-primary-text-110: 0, 0%, calc(((((var(--theme-primary-4-r) * var(--theme-t-r)) + (var(--theme-primary-4-g) * var(--theme-t-g)) + (var(--theme-primary-4-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
  --theme-primary-text-120: 0, 0%, calc(((((var(--theme-primary-3-r) * var(--theme-t-r)) + (var(--theme-primary-3-g) * var(--theme-t-g)) + (var(--theme-primary-3-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
  --theme-primary-text-130: 0, 0%, calc(((((var(--theme-primary-2-r) * var(--theme-t-r)) + (var(--theme-primary-2-g) * var(--theme-t-g)) + (var(--theme-primary-2-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
  --theme-primary-text-140: 0, 0%, calc(((((var(--theme-primary-1-r) * var(--theme-t-r)) + (var(--theme-primary-1-g) * var(--theme-t-g)) + (var(--theme-primary-1-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
}

.is-theme-style-dark {
  --theme-primary-text-010: 0, 0%, calc(((((var(--theme-primary-1-r) * var(--theme-t-r)) + (var(--theme-primary-1-g) * var(--theme-t-g)) + (var(--theme-primary-1-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
  --theme-primary-text-020: 0, 0%, calc(((((var(--theme-primary-2-r) * var(--theme-t-r)) + (var(--theme-primary-2-g) * var(--theme-t-g)) + (var(--theme-primary-2-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
  --theme-primary-text-030: 0, 0%, calc(((((var(--theme-primary-3-r) * var(--theme-t-r)) + (var(--theme-primary-3-g) * var(--theme-t-g)) + (var(--theme-primary-3-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
  --theme-primary-text-040: 0, 0%, calc(((((var(--theme-primary-4-r) * var(--theme-t-r)) + (var(--theme-primary-4-g) * var(--theme-t-g)) + (var(--theme-primary-4-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
  --theme-primary-text-050: 0, 0%, calc(((((var(--theme-primary-5-r) * var(--theme-t-r)) + (var(--theme-primary-5-g) * var(--theme-t-g)) + (var(--theme-primary-5-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
  --theme-primary-text-060: 0, 0%, calc(((((var(--theme-primary-6-r) * var(--theme-t-r)) + (var(--theme-primary-6-g) * var(--theme-t-g)) + (var(--theme-primary-6-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
  --theme-primary-text-070: 0, 0%, calc(((((var(--theme-primary-7-r) * var(--theme-t-r)) + (var(--theme-primary-7-g) * var(--theme-t-g)) + (var(--theme-primary-7-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
  --theme-primary-text-080: 0, 0%, calc(((((var(--theme-primary-8-r) * var(--theme-t-r)) + (var(--theme-primary-8-g) * var(--theme-t-g)) + (var(--theme-primary-8-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
  --theme-primary-text-090: 0, 0%, calc(((((var(--theme-primary-9-r) * var(--theme-t-r)) + (var(--theme-primary-9-g) * var(--theme-t-g)) + (var(--theme-primary-9-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
  --theme-primary-text-100: 0, 0%, calc(((((var(--theme-primary-10-r) * var(--theme-t-r)) + (var(--theme-primary-10-g) * var(--theme-t-g)) + (var(--theme-primary-10-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
  --theme-primary-text-110: 0, 0%, calc(((((var(--theme-primary-11-r) * var(--theme-t-r)) + (var(--theme-primary-11-g) * var(--theme-t-g)) + (var(--theme-primary-11-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
  --theme-primary-text-120: 0, 0%, calc(((((var(--theme-primary-12-r) * var(--theme-t-r)) + (var(--theme-primary-12-g) * var(--theme-t-g)) + (var(--theme-primary-12-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
  --theme-primary-text-130: 0, 0%, calc(((((var(--theme-primary-13-r) * var(--theme-t-r)) + (var(--theme-primary-13-g) * var(--theme-t-g)) + (var(--theme-primary-13-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
  --theme-primary-text-140: 0, 0%, calc(((((var(--theme-primary-14-r) * var(--theme-t-r)) + (var(--theme-primary-14-g) * var(--theme-t-g)) + (var(--theme-primary-14-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
}

@media (prefers-color-scheme: light) {
  .is-theme-style-system {
    --theme-primary-010: var(--theme-primary-14);
    --theme-primary-020: var(--theme-primary-13);
    --theme-primary-030: var(--theme-primary-12);
    --theme-primary-040: var(--theme-primary-11);
    --theme-primary-050: var(--theme-primary-10);
    --theme-primary-060: var(--theme-primary-9);
    --theme-primary-070: var(--theme-primary-8);
    --theme-primary-080: var(--theme-primary-7);
    --theme-primary-090: var(--theme-primary-6);
    --theme-primary-100: var(--theme-primary-5);
    --theme-primary-110: var(--theme-primary-4);
    --theme-primary-120: var(--theme-primary-3);
    --theme-primary-130: var(--theme-primary-2);
    --theme-primary-140: var(--theme-primary-1);
  }

  .is-theme-style-system {
    --theme-primary-text-010: 0, 0%, calc(((((var(--theme-primary-14-r) * var(--theme-t-r)) + (var(--theme-primary-14-g) * var(--theme-t-g)) + (var(--theme-primary-14-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
    --theme-primary-text-020: 0, 0%, calc(((((var(--theme-primary-13-r) * var(--theme-t-r)) + (var(--theme-primary-13-g) * var(--theme-t-g)) + (var(--theme-primary-13-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
    --theme-primary-text-030: 0, 0%, calc(((((var(--theme-primary-12-r) * var(--theme-t-r)) + (var(--theme-primary-12-g) * var(--theme-t-g)) + (var(--theme-primary-12-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
    --theme-primary-text-040: 0, 0%, calc(((((var(--theme-primary-11-r) * var(--theme-t-r)) + (var(--theme-primary-11-g) * var(--theme-t-g)) + (var(--theme-primary-11-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
    --theme-primary-text-050: 0, 0%, calc(((((var(--theme-primary-10-r) * var(--theme-t-r)) + (var(--theme-primary-10-g) * var(--theme-t-g)) + (var(--theme-primary-10-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
    --theme-primary-text-060: 0, 0%, calc(((((var(--theme-primary-9-r) * var(--theme-t-r)) + (var(--theme-primary-9-g) * var(--theme-t-g)) + (var(--theme-primary-9-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
    --theme-primary-text-070: 0, 0%, calc(((((var(--theme-primary-8-r) * var(--theme-t-r)) + (var(--theme-primary-8-g) * var(--theme-t-g)) + (var(--theme-primary-8-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
    --theme-primary-text-080: 0, 0%, calc(((((var(--theme-primary-7-r) * var(--theme-t-r)) + (var(--theme-primary-7-g) * var(--theme-t-g)) + (var(--theme-primary-7-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
    --theme-primary-text-090: 0, 0%, calc(((((var(--theme-primary-6-r) * var(--theme-t-r)) + (var(--theme-primary-6-g) * var(--theme-t-g)) + (var(--theme-primary-6-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
    --theme-primary-text-100: 0, 0%, calc(((((var(--theme-primary-5-r) * var(--theme-t-r)) + (var(--theme-primary-5-g) * var(--theme-t-g)) + (var(--theme-primary-5-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
    --theme-primary-text-110: 0, 0%, calc(((((var(--theme-primary-4-r) * var(--theme-t-r)) + (var(--theme-primary-4-g) * var(--theme-t-g)) + (var(--theme-primary-4-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
    --theme-primary-text-120: 0, 0%, calc(((((var(--theme-primary-3-r) * var(--theme-t-r)) + (var(--theme-primary-3-g) * var(--theme-t-g)) + (var(--theme-primary-3-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
    --theme-primary-text-130: 0, 0%, calc(((((var(--theme-primary-2-r) * var(--theme-t-r)) + (var(--theme-primary-2-g) * var(--theme-t-g)) + (var(--theme-primary-2-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
    --theme-primary-text-140: 0, 0%, calc(((((var(--theme-primary-1-r) * var(--theme-t-r)) + (var(--theme-primary-1-g) * var(--theme-t-g)) + (var(--theme-primary-1-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
  }
}

@media (prefers-color-scheme: dark) {
  .is-theme-style-system {
    --theme-primary-010: var(--theme-primary-1);
    --theme-primary-020: var(--theme-primary-2);
    --theme-primary-030: var(--theme-primary-3);
    --theme-primary-040: var(--theme-primary-4);
    --theme-primary-050: var(--theme-primary-5);
    --theme-primary-060: var(--theme-primary-6);
    --theme-primary-070: var(--theme-primary-7);
    --theme-primary-080: var(--theme-primary-8);
    --theme-primary-090: var(--theme-primary-9);
    --theme-primary-100: var(--theme-primary-10);
    --theme-primary-110: var(--theme-primary-11);
    --theme-primary-120: var(--theme-primary-12);
    --theme-primary-130: var(--theme-primary-13);
    --theme-primary-140: var(--theme-primary-14);
  }

  .is-theme-style-system {
    --theme-primary-text-010: 0, 0%, calc(((((var(--theme-primary-1-r) * var(--theme-t-r)) + (var(--theme-primary-1-g) * var(--theme-t-g)) + (var(--theme-primary-1-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
    --theme-primary-text-020: 0, 0%, calc(((((var(--theme-primary-2-r) * var(--theme-t-r)) + (var(--theme-primary-2-g) * var(--theme-t-g)) + (var(--theme-primary-2-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
    --theme-primary-text-030: 0, 0%, calc(((((var(--theme-primary-3-r) * var(--theme-t-r)) + (var(--theme-primary-3-g) * var(--theme-t-g)) + (var(--theme-primary-3-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
    --theme-primary-text-040: 0, 0%, calc(((((var(--theme-primary-4-r) * var(--theme-t-r)) + (var(--theme-primary-4-g) * var(--theme-t-g)) + (var(--theme-primary-4-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
    --theme-primary-text-050: 0, 0%, calc(((((var(--theme-primary-5-r) * var(--theme-t-r)) + (var(--theme-primary-5-g) * var(--theme-t-g)) + (var(--theme-primary-5-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
    --theme-primary-text-060: 0, 0%, calc(((((var(--theme-primary-6-r) * var(--theme-t-r)) + (var(--theme-primary-6-g) * var(--theme-t-g)) + (var(--theme-primary-6-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
    --theme-primary-text-070: 0, 0%, calc(((((var(--theme-primary-7-r) * var(--theme-t-r)) + (var(--theme-primary-7-g) * var(--theme-t-g)) + (var(--theme-primary-7-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
    --theme-primary-text-080: 0, 0%, calc(((((var(--theme-primary-8-r) * var(--theme-t-r)) + (var(--theme-primary-8-g) * var(--theme-t-g)) + (var(--theme-primary-8-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
    --theme-primary-text-090: 0, 0%, calc(((((var(--theme-primary-9-r) * var(--theme-t-r)) + (var(--theme-primary-9-g) * var(--theme-t-g)) + (var(--theme-primary-9-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
    --theme-primary-text-100: 0, 0%, calc(((((var(--theme-primary-10-r) * var(--theme-t-r)) + (var(--theme-primary-10-g) * var(--theme-t-g)) + (var(--theme-primary-10-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
    --theme-primary-text-110: 0, 0%, calc(((((var(--theme-primary-11-r) * var(--theme-t-r)) + (var(--theme-primary-11-g) * var(--theme-t-g)) + (var(--theme-primary-11-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
    --theme-primary-text-120: 0, 0%, calc(((((var(--theme-primary-12-r) * var(--theme-t-r)) + (var(--theme-primary-12-g) * var(--theme-t-g)) + (var(--theme-primary-12-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
    --theme-primary-text-130: 0, 0%, calc(((((var(--theme-primary-13-r) * var(--theme-t-r)) + (var(--theme-primary-13-g) * var(--theme-t-g)) + (var(--theme-primary-13-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
    --theme-primary-text-140: 0, 0%, calc(((((var(--theme-primary-14-r) * var(--theme-t-r)) + (var(--theme-primary-14-g) * var(--theme-t-g)) + (var(--theme-primary-14-b) * var(--theme-t-b))) / 255) - var(--theme-t)) * -10000000%);
  }
}

:root {
  --theme-shadow: 1;
  --theme-shadow-size-small: calc(calc(var(--theme-shadow) / 100) * 1);
  --theme-shadow-size-medium: calc(calc(var(--theme-shadow) / 100) * 2);
  --theme-shadow-size-large: calc(calc(var(--theme-shadow) / 100) * 3);
  --theme-shadow-offset-base: 20;
  --theme-shadow-offset-y: calc(calc(var(--theme-shadow-offset-base) / 1000) * 1em);
  --theme-shadow-blur-base: 30;
  --theme-shadow-blur: calc(calc(var(--theme-shadow-blur-base) / 1000) * 1em);
  --theme-shadow-opacity-base: 20;
  --theme-shadow-opacity: calc(var(--theme-shadow-opacity-base) / 1000);
  --theme-shadow-bottom-small:
    0 calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-offset-y) * 2)) calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-blur) * 4)) rgba(0, 0, 0, calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-opacity) * 1))),
    0 calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-offset-y) * 4)) calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-blur) * 8)) rgba(0, 0, 0, calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-opacity) * 2))),
    0 calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-offset-y) * 8)) calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-blur) * 16)) rgba(0, 0, 0, calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-opacity) * 3))),
    0 calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-offset-y) * 16)) calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-blur) * 32)) rgba(0, 0, 0, calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-opacity) * 4)));
  --theme-shadow-bottom-medium:
    0 calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-offset-y) * 2)) calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-blur) * 4)) rgba(0, 0, 0, calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-opacity) * 1))),
    0 calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-offset-y) * 4)) calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-blur) * 8)) rgba(0, 0, 0, calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-opacity) * 2))),
    0 calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-offset-y) * 8)) calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-blur) * 16)) rgba(0, 0, 0, calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-opacity) * 3))),
    0 calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-offset-y) * 16)) calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-blur) * 32)) rgba(0, 0, 0, calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-opacity) * 4)));
  --theme-shadow-bottom-large:
    0 calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-offset-y) * 2)) calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-blur) * 4)) rgba(0, 0, 0, calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-opacity) * 1))),
    0 calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-offset-y) * 4)) calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-blur) * 8)) rgba(0, 0, 0, calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-opacity) * 2))),
    0 calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-offset-y) * 8)) calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-blur) * 16)) rgba(0, 0, 0, calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-opacity) * 3))),
    0 calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-offset-y) * 16)) calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-blur) * 32)) rgba(0, 0, 0, calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-opacity) * 4)));
  --theme-shadow-top-small:
    0 calc(var(--theme-shadow-size-small) * calc(calc(var(--theme-shadow-offset-y) * -1) * 2)) calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-blur) * 4)) rgba(0, 0, 0, calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-opacity) * 1))),
    0 calc(var(--theme-shadow-size-small) * calc(calc(var(--theme-shadow-offset-y) * -1) * 4)) calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-blur) * 8)) rgba(0, 0, 0, calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-opacity) * 2))),
    0 calc(var(--theme-shadow-size-small) * calc(calc(var(--theme-shadow-offset-y) * -1) * 8)) calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-blur) * 16)) rgba(0, 0, 0, calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-opacity) * 3))),
    0 calc(var(--theme-shadow-size-small) * calc(calc(var(--theme-shadow-offset-y) * -1) * 16)) calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-blur) * 32)) rgba(0, 0, 0, calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-opacity) * 4)));
  --theme-shadow-top-medium:
    0 calc(var(--theme-shadow-size-medium) * calc(calc(var(--theme-shadow-offset-y) * -1) * 2)) calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-blur) * 4)) rgba(0, 0, 0, calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-opacity) * 1))),
    0 calc(var(--theme-shadow-size-medium) * calc(calc(var(--theme-shadow-offset-y) * -1) * 4)) calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-blur) * 8)) rgba(0, 0, 0, calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-opacity) * 2))),
    0 calc(var(--theme-shadow-size-medium) * calc(calc(var(--theme-shadow-offset-y) * -1) * 8)) calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-blur) * 16)) rgba(0, 0, 0, calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-opacity) * 3))),
    0 calc(var(--theme-shadow-size-medium) * calc(calc(var(--theme-shadow-offset-y) * -1) * 16)) calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-blur) * 32)) rgba(0, 0, 0, calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-opacity) * 4)));
  --theme-shadow-top-large:
    0 calc(var(--theme-shadow-size-large) * calc(calc(var(--theme-shadow-offset-y) * -1) * 2)) calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-blur) * 4)) rgba(0, 0, 0, calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-opacity) * 1))),
    0 calc(var(--theme-shadow-size-large) * calc(calc(var(--theme-shadow-offset-y) * -1) * 4)) calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-blur) * 8)) rgba(0, 0, 0, calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-opacity) * 2))),
    0 calc(var(--theme-shadow-size-large) * calc(calc(var(--theme-shadow-offset-y) * -1) * 8)) calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-blur) * 16)) rgba(0, 0, 0, calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-opacity) * 3))),
    0 calc(var(--theme-shadow-size-large) * calc(calc(var(--theme-shadow-offset-y) * -1) * 16)) calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-blur) * 32)) rgba(0, 0, 0, calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-opacity) * 4)));
}

.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: var(--z-index-background);
}

.theme-background-type {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
  opacity: 0;
  transition: background-color var(--layout-transition-extra-fast), opacity var(--layout-transition-medium);
}

.theme-background-type-theme {
  background-color: hsl(var(--theme-background-theme));
}

.theme-background-type-accent {
  background-color: rgb(var(--theme-background-accent));
}

.theme-background-type-color {
  background-color: rgb(var(--theme-background-color));
}

.theme-background-type-gradient {
  background-image: linear-gradient(calc(var(--theme-background-gradient-angle) * 1deg), rgb(var(--theme-background-gradient-start)), rgb(var(--theme-background-gradient-end)));
}

.theme-background-type-image-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-image: var(--theme-background-image);
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  opacity: calc(var(--theme-background-image-opacity) / 100);
  transform: scale(calc(calc(var(--theme-background-image-scale) / 100) + calc(var(--theme-background-image-blur) / 400)));
  filter: blur(calc(var(--theme-background-image-blur) * 1px)) grayscale(calc(var(--theme-background-image-grayscale) / 100));
}

.theme-background-type-image-accent {
  background-color: rgba(var(--theme-accent), calc(var(--theme-background-image-accent) / 100));
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.theme-background-type-image-vignette {
  position: absolute;
  top: -1em;
  left: -1em;
  width: calc(100vw + 2em);
  height: calc(100vh + 2em);
  pointer-events: none;
  background-image: radial-gradient(circle,
      transparent calc(var(--theme-background-image-vignette-end) * 1%),
      rgba(0, 0, 0, calc(var(--theme-background-image-vignette-opacity) / 100)) calc(var(--theme-background-image-vignette-start) * 1%));
  z-index: 3;
}

.theme-background-type-video-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: calc(var(--theme-background-video-opacity) / 100);
  transform: scale(calc(calc(var(--theme-background-video-scale) / 100) + calc(var(--theme-background-video-blur) / 400)));
  filter: blur(calc(var(--theme-background-video-blur) * 1px)) grayscale(calc(var(--theme-background-video-grayscale) / 100));
}

.theme-background-type-video-accent {
  background-color: rgba(var(--theme-accent), calc(var(--theme-background-video-accent) / 100));
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.theme-background-type-video-vignette {
  position: absolute;
  top: -1em;
  left: -1em;
  width: calc(100vw + 2em);
  height: calc(100vh + 2em);
  pointer-events: none;
  background-image: radial-gradient(circle,
      transparent calc(var(--theme-background-video-vignette-end) * 1%),
      rgba(0, 0, 0, calc(var(--theme-background-video-vignette-opacity) * 1%)) calc(var(--theme-background-video-vignette-start) * 1%));
  z-index: 3;
}

.theme-background-type-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.is-theme-background-type-theme .theme-background-type-theme,
.is-theme-background-type-accent .theme-background-type-accent,
.is-theme-background-type-color .theme-background-type-color,
.is-theme-background-type-gradient .theme-background-type-gradient,
.is-theme-background-type-image .theme-background-type-image,
.is-theme-background-type-video .theme-background-type-video {
  opacity: 1;
}